#app {
    font-family:Avenir,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color:#2c3e50
}
div:focus,section:focus {
    outline:0
}
*,:after,:before {
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.node-wrap-box {
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column
}
.node-wrap-box.condition {
    padding:30px 50px 0
}
.node-wrap-box.empty {
    overflow:hidden
}
.node-wrap-box.approver:before {
    content:"";
    position:absolute;
    top:-10px;
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    width:0;
    height:4px;
    border-style:solid;
    border-width:8px 6px 4px;
    border-color:#cacaca transparent transparent;
}
.node-wrap-box.error.condition .error-tip {
    right:0
}
.node-wrap-box.error .error-tip {
    right:-40px
}
.node-wrap-box.error .flow-path-card {
    border:1px solid red
}
.node-wrap-box.error .flow-path-card:hover {
    border-width:0
}
.node-wrap-box .error-tip {
    position:absolute;
    right:0;
    top:15%;
    width:30px;
    height:30px;
    color:red;
    cursor:pointer;
    border-radius:50%;
    border:1px solid;
    line-height:30px;
    -webkit-transition:right .5s;
    transition:right .5s
}
.node-wrap-box.condition .error-tip {
    right:60px
}
.end-node {
    font-size:12px;
    text-align:center;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column
}
/*.end-node:before {*/
    /*content:"";*/
    /*width:10px;*/
    /*height:10px;*/
    /*margin:auto;*/
    /*border:none;*/
    /*margin-bottom:12px;*/
    /*border-radius:50%;*/
    /*background:#dbdcdc*/
/*}*/
.flow-path-card {
    width:220px;
    min-height:82px;
    font-size:12px;
    border-radius:4px;
    text-align:left;
    cursor:pointer;
    overflow:hidden;
    position:relative;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-box-shadow:0 0 6px 0 rgba(0,0,0,.3);
    box-shadow:0 0 6px 0 rgba(0,0,0,.3);
    background:#fff
}
.flow-path-card:hover {
    -webkit-box-shadow:0 0 0 2px #3296fa,0 0 5px 4px rgba(0,0,0,.2);
    box-shadow:0 0 0 2px #3296fa,0 0 5px 4px rgba(0,0,0,.2)
}
.flow-path-card.copy .header {
    background-color:#3296fa
}
.flow-path-card.approver:hover {
    -webkit-box-shadow:0 0 0 2px #ff9431,0 0 5px 4px rgba(0,0,0,.2);
    box-shadow:0 0 0 2px #ff9431,0 0 5px 4px rgba(0,0,0,.2)
}
.flow-path-card.approver .header {
    background-color:#ff9431
}
.flow-path-card.start-node:hover {
    -webkit-box-shadow:0 0 0 2px #409EFF,0 0 5px 4px rgba(0,0,0,.2);
    box-shadow:0 0 0 2px #409EFF,0 0 5px 4px rgba(0,0,0,.2)
}
.flow-path-card.start-node .header {
    background-color:#409EFF
}
.flow-path-card .header {
    padding-left:16px;
    padding-right:30px;
    width:100%;
    height:24px;
    line-height:24px;
    color:#fff;
    position:relative;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.flow-path-card .header .title-box {
    position:relative;
    display:inline-block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    height: 100%;
    width: 190px;
}
.flow-path-card .header .title-input {
    position:absolute;
    left:0;
    border:none;
    background:inherit;
    color:inherit;
    opacity:0
}
.flow-path-card .header .title-input:focus {
    border-radius:6px;
    font-size:12px;
    padding:2px;
    padding-left:4px;
    width:97%;
    margin-left:1px;
    height:18px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-box-shadow:0 0 2px 2px #7ec3e1;
    box-shadow:0 0 2px 2px #7ec3e1;
    background-color:#f5f5f7;
    color:#000;
    opacity:1
}
.flow-path-card .header .title-text {
    vertical-align:middle
}
.flow-path-card .header>.actions {
    position:absolute;
    right:0;
    top:0;
    visibility:hidden
}
.flow-path-card:not(.start-node):hover .actions {
    visibility:visible
}
.flow-path-card:not(.start-node):hover .title-text {
    border-bottom:1px dashed currentColor
}
.flow-path-card .body {
    position:relative;
    padding:12px;
    padding-right:30px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.flow-path-card .body .text {
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical
}
.flow-path-card .icon-wrapper {
    position:absolute;
    top:0;
    height:100%;
    width:14px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.flow-path-card .icon-wrapper.left {
    left:0
}
.flow-path-card .icon-wrapper.right {
    right:0
}
.flow-path-card .icon-wrapper>.left-arrow,.flow-path-card .icon-wrapper>.right-arrow {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
}
.flow-path-card.condition {
    padding:8px 14px
}
.flow-path-card.condition .header {
    height:18px;
    line-height:18px;
    color:inherit;
    padding:0
}
.flow-path-card.condition .header .title-text {
    color:#15bc83
}
.flow-path-card.condition .body {
    padding:8px 14px
}
.flow-path-card.condition .icon-wrapper:hover {
    background-color:#f1f1f1
}
.flow-path-card.condition .left-arrow,.flow-path-card.condition .right-arrow {
    visibility:hidden
}
.flow-path-card.condition:hover .left-arrow,.flow-path-card.condition:hover .right-arrow {
    visibility:visible
}
.col-box:first-of-type .condition .left,.col-box:last-of-type .condition .right,.flow-path-card.condition:hover .priority {
    display:none
}
.add-node-btn-box {
    width:220px;
    height:100px;
    position:relative;
    padding-top:30px;
    margin:auto
}
.add-node-btn-box:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:-1;
    margin:auto;
    width:2px;
    height:100%;
    background-color:#cacaca
}
.add-node-btn-box .add-node-btn {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
.add-node-btn-box .add-node-btn .btn {
    width:32px;
    height:32px;
    border-radius:15px;
    cursor:pointer;
    outline:none;
    background-color:#3296fa;
    border-color:transparent;
    -webkit-transition:-webkit-transform .5s;
    transition:-webkit-transform .5s;
    transition:transform .5s;
    transition:transform .5s,-webkit-transform .5s
}
.add-node-btn-box .add-node-btn .btn:hover {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    -webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.1);
    box-shadow:0 8px 16px 0 rgba(0,0,0,.1)
}
.add-node-btn-box .add-node-btn .btn .icon {
    color:#fff
}
.branch-wrap .branch-box-wrap {
    flex-direction:column;
    -webkit-box-align:center;
    align-items:center
}
.branch-wrap .branch-box {
    -webkit-box-align:stretch;
    -ms-flex-align:stretch;
    align-items:stretch;
    /*border-bottom:2px solid #cacaca;*/
    /*border-top:2px solid #cacaca;*/
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    background: #FFFFFF;
}
.branch-wrap .branch-box>.col-box {
    border-bottom:2px solid #cacaca;
    border-top:2px solid #cacaca;
    display:-webkit-box;
    /*display:-ms-flexbox;*/
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    /*-ms-flex-direction:column;*/
    flex-direction:column;
    -webkit-box-align:center;
    /*-ms-flex-align:center;*/
    align-items:center;
    position:relative
}
.branch-wrap .branch-box>.col-box:first-of-type:after,.branch-wrap .branch-box>.col-box:first-of-type:before {
    content:"";
    position:absolute;
    left:0;
    height:3px;
    width:calc(50% - 1px);
    /*background:#f5f5f7*/
    background: #ffffff;
}
.branch-wrap .branch-box>.col-box:first-of-type:before {
    top:-2px
}
.branch-wrap .branch-box>.col-box:first-of-type:after {
    bottom:-2px
}
.branch-wrap .branch-box>.col-box:last-of-type:after,.branch-wrap .branch-box>.col-box:last-of-type:before {
    content:"";
    position:absolute;
    right:0;
    height:3px;
    width:calc(50% - 1px);
    background:#ffffff
}
.branch-wrap .branch-box>.col-box:last-of-type:before {
    top:-2px
}
.branch-wrap .branch-box>.col-box:last-of-type:after {
    bottom:-2px
}
.branch-wrap .branch-box>.col-box .center-line {
    height:100%;
    width:2px;
    background:#cacaca;
    position:absolute
}
.branch-wrap .branch-box>.btn {
    z-index:99;
    cursor:pointer;
    position:absolute;
    top:0;
    outline:none;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    padding:6px 10px;
    border:none;
    border-radius:15px;
    background:#fff;
    -webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.2);
    box-shadow:0 0 10px 0 rgba(0,0,0,.2);
    -webkit-transition:-webkit-transform .3s;
    transition:-webkit-transform .3s;
    transition:transform .3s;
    transition:transform .3s,-webkit-transform .3s
}
.branch-wrap .branch-box>.btn:hover {
    -webkit-transform:scale(1.1) translateY(-50%);
    transform:scale(1.1) translateY(-50%)
}
.condition-box {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-around;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    text-align:center;
    padding:10px 20px
}
.condition-box>div:first-child .iconfont {
    color:#ff943e
}
.condition-box>div:nth-child(2) .iconfont {
    color:#3296fa
}
.condition-box .condition-icon {
    width:60px;
    height:60px;
    line-height:60px;
    border:1px solid #e5e5e5;
    border-radius:30px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    font-size:12px;
    cursor:pointer;
    margin-bottom:4px
}
.condition-box .condition-icon .iconfont {
    font-size:32px
}
.condition-box .condition-icon:hover {
    background:#3296fa;
    -webkit-box-shadow:0 0 8px 4px rgba(0,0,0,.1);
    box-shadow:0 0 8px 4px rgba(0,0,0,.1)
}
.condition-box .condition-icon:hover>.iconfont {
    color:#fff
}
.relative {
    position:relative
}
.flex {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
.justify-center {
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
.icon {
    vertical-align:middle;
    width:14px;
    height:14px;
    font-size:14px
}
.priority {
    position:absolute;
    right:0;
    font-size:12px
}
.cmp-container {
    line-height:30px;
    padding:10px
}
.label {
    font-size:12px;
    padding-right:16px!important;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical
}
.icon-wrapper {
    text-align:center
}
.icon-wrapper i {
    cursor:pointer;
    color:#c5c5c5
}
.icon-wrapper i:hover {
    color:#333
}
.cmp-container {
    line-height:30px;
    padding:10px
}
.cmp-container .el-input--small .el-input__inner {
    padding-left:10px;
    padding-right:15px
}
.cmp-container .el-input-number.is-controls-right .el-input__inner {
    padding-left:15px;
    padding-right:0;
    text-align:left
}
.cmp-container .el-input:hover .el-input__inner {
    border-color:#529eff
}
.label {
    font-size:12px;
    padding-right:16px!important;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical
}
.range-title {
    font-size:12px;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.icon-wrapper i {
    cursor:pointer;
    color:#c5c5c5
}
.icon-wrapper i:hover {
    color:#333
}
.condition-dialog .el-dialog__header {
    border-bottom:1px solid #eee
}
.drawer .el-drawer__header {
    margin-bottom:0;
    border-bottom:1px solid #c5c5c5;
    padding-bottom:8px
}
.drawer .el-drawer__body {
    padding-bottom:44px;
    overflow:hidden
}
.drawer .pane-tab {
    height:100%
}
.drawer .pane-tab .el-tabs__item.is-top:nth-child(2) {
    padding-left:20px
}
.drawer .el-tabs__item:focus {
    -webkit-box-shadow:none!important;
    box-shadow:none!important
}
.drawer .el-tabs__header {
    margin-bottom:0
}
.header {
    line-height:28px
}
.actions {
    position:absolute;
    bottom:0;
    left:0;
    /*padding:6px 12px;*/
    width:100%;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    text-align:right
}
.radio-item {
    width:110px;
    padding:6px
}
.priority-select {
    width:118px;
    position:absolute;
    right:26px
}
.form-auth-table {
    font-size:14px
}
.form-auth-table .auth-table-header {
    background:#fafafa;
    line-height:40px
}
.form-auth-table .row {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    line-height:32px;
    padding:8px 12px;
    border-bottom:1px solid #efefef
}
.form-auth-table .row:hover {
    background:#f5f7fa
}
.form-auth-table .row .label {
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.form-auth-table .row .label .required {
    color:#f2725e
}
.form-auth-table .row .radio-group {
    -webkit-box-flex:2;
    -ms-flex:2;
    flex:2;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
.approver-pane {
    overflow-y:scroll;
    overflow-x:hidden
}
.approver-pane .option-box {
    font-size:14px;
    padding-left:1rem
}
.condition-pane {
    height:100%;
    overflow:scroll
}
.flow-container {
    display:inline-block;
    padding:30px 20px 20px 20px;
    width:100%;
    height:100%;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    text-align:center;
    overflow:auto
}
.scale-slider {
    position:fixed;
    right:30px;
    z-index:99
}
.scale-slider .btn {
    display:inline-block;
    padding:4px;
    border:1px solid #cacaca;
    border-radius:3px;
    background:#fff;
    margin-left:10px;
    margin-right:10px;
    cursor:pointer
}
.icon-ul {
    margin:0;
    padding:0;
    font-size:0
}
.icon-ul li {
    list-style-type:none;
    text-align:center;
    font-size:14px;
    display:inline-block;
    width:16.66%;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    height:108px;
    padding:15px 6px 6px 6px;
    cursor:pointer;
    overflow:hidden
}
.icon-ul li:hover {
    background:#f2f2f2
}
.icon-ul li.active-item {
    background:#e1f3fb;
    color:#7a6df0
}
.icon-ul li>i {
    font-size:30px;
    line-height:50px
}
.icon-dialog .el-dialog {
    border-radius:8px;
    margin-bottom:0;
    margin-top:4vh!important;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    max-height:92vh;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.icon-dialog .el-dialog .el-dialog__header {
    padding-top:14px
}
.icon-dialog .el-dialog .el-dialog__body {
    margin:0 20px 20px 20px;
    padding:0;
    overflow:auto
}
.right-board {
    border-left:1px solid #f1e8e8;
    width:350px;
    position:absolute;
    right:0;
    top:0;
    padding-top:3px
}
.right-board .field-box {
    position:relative;
    height:calc(100vh - 42px);
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    overflow:hidden
}
.right-board .el-scrollbar {
    height:calc(100% - 48px)
}
.select-item {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    border:1px dashed #fff;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.select-item .close-btn {
    cursor:pointer;
    color:#f56c6c
}
.select-item .el-input+.el-input {
    margin-left:4px
}
.select-item+.select-item {
    margin-top:4px
}
.select-item.sortable-chosen {
    border:1px dashed #409eff
}
.select-line-icon {
    line-height:32px;
    font-size:22px;
    padding:0 4px;
    color:#777
}
.option-drag {
    cursor:move
}
.time-range .el-date-editor {
    width:227px
}
.time-range .el-icon-time {
    display:none
}
.document-link {
    position:absolute;
    display:block;
    width:26px;
    height:26px;
    top:0;
    left:0;
    cursor:pointer;
    background:#409eff;
    z-index:1;
    border-radius:0 0 6px 0;
    text-align:center;
    line-height:26px;
    color:#fff;
    font-size:18px
}
.node-label {
    font-size:14px
}
.node-icon {
    color:#bebfc3
}
.calc-btn {
    padding:4px 8px;
    margin:0 6px;
    background:#e5e5e5;
    cursor:pointer
}
.calc-btn.error {
    background:#f56c6c;
    color:#fff
}
.calc-btn:hover {
    background:#f5f5f5
}
.pane-calc-preview {
    padding:0 10px;
    cursor:pointer;
    min-height:32px;
    border:1px solid #e5e5e5;
    border-radius:4px;
    font-size:12px
}
.calc-dialog .el-dialog__body {
    padding-top:0
}
.calc-dialog .calc-box {
    font-size:12px;
    line-height:2
}
.calc-dialog .calc-box .calc-tip {
    margin:10px 0;
    font-size:12px;
    color:#aaa
}
.calc-dialog .calc-box .calc-preview {
    border:1px solid #e5e5e5;
    border-radius:4px;
    min-height:60px;
    padding:4px 10px;
    position:relative
}
.calc-dialog .calc-box .calc-preview.error {
    border:1px solid red
}
.calc-dialog .calc-box .calc-preview .preview-actions {
    position:absolute;
    bottom:0;
    right:0
}
.calc-dialog .calc-box .calc-preview .preview-actions>i {
    font-size:14px;
    margin-right:8px;
    cursor:pointer
}
.calc-dialog .calc-box .calc-preview .preview-actions>i:hover {
    color:red
}
.calc-dialog .el-dialog__body {
    padding-top:0;
    padding-bottom:0
}
.container {
    position:relative;
    width:100%;
    height:100%;
    background:#fff
}
.components-list {
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    height:100%;
    padding-left:8px;
    padding-right:8px
}
.components-list .components-item {
    display:inline-block;
    width:48%;
    margin:1%;
    -webkit-transition:-webkit-transform 0ms!important;
    transition:-webkit-transform 0ms!important;
    transition:transform 0ms!important;
    transition:transform 0ms,-webkit-transform 0ms!important
}
.components-draggable {
    padding-bottom:10px
}
.components-title {
    font-size:14px;
    color:#222;
    margin:6px 2px
}
.components-title .svg-icon {
    color:#666;
    font-size:18px
}
.components-body {
    padding:8px 18px;
    background:#fff;
    font-size:12px;
    line-height:18px;
    cursor:move;
    border:1px solid #d9d9d9;
    border-radius:3px
}
.components-body .svg-icon {
    color:#777;
    font-size:15px
}
.components-body:hover {
    border:1px dashed #787be8;
    color:#787be8
}
.components-body:hover .svg-icon {
    color:#787be8
}
.left-board {
    width:300px;
    position:absolute;
    left:0;
    top:0;
    height:100%
}
.left-scrollbar {
    padding:0 0 8px 0
}
.center-scrollbar,.left-scrollbar {
    height:100%;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    border-right:1px solid #f1e8e8
}
.center-scrollbar {
    text-align:left;
    border-left:1px solid #f1e8e8
}
.center-board {
    height:100%;
    width:auto;
    margin:0 350px 0 300px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    position:relative
}
.empty-info {
    position:absolute;
    top:33%;
    left:0;
    right:0;
    text-align:center;
    font-size:18px;
    color:#ccb1ea;
    letter-spacing:4px
}
.action-bar {
    position:absolute;
    right:1rem;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    z-index:99
}
.action-bar .delete-btn {
    color:#f56c6c;
    margin-left:0!important
}
.logo-wrapper {
    position:relative;
    height:42px;
    background:#fff;
    border-bottom:1px solid #f1e8e8;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.logo {
    position:absolute;
    left:12px;
    top:6px;
    line-height:30px;
    color:#00afff;
    font-weight:600;
    font-size:17px;
    white-space:nowrap
}
.logo>img {
    width:30px;
    height:30px;
    vertical-align:top
}
.logo .github {
    display:inline-block;
    vertical-align:sub;
    margin-left:15px
}
.logo .github>img {
    height:22px
}
.center-board-row {
    padding:12px 12px 15px 1px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.center-board-row>.el-form {
    height:calc(100vh - 69px)
}
.drawing-board {
    height:100%;
    position:relative
}
.drawing-board .components-body {
    padding:0;
    margin:0;
    font-size:0;
    min-height:60px
}
.drawing-board .sortable-ghost {
    position:relative;
    display:block;
    height:60px;
    overflow:hidden;
    background:#fff
}
.drawing-board .sortable-ghost:before {
    content:" ";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:3px;
    background:#5959df;
    z-index:2
}
.drawing-board .components-item.sortable-ghost {
    width:100%;
    height:60px;
    overflow:hidden;
    background-color:#f6f7ff
}
.drawing-board .active-from-item>.el-form-item {
    background:#f6f7ff;
    border-radius:6px;
    outline:1px solid #38adff
}
.drawing-board .active-from-item>.drawing-item-copy,.drawing-board .active-from-item>.drawing-item-delete {
    display:initial
}
.drawing-board .active-from-item>.component-name {
    color:#409eff
}
.drawing-board .el-form-item {
    margin-bottom:12px!important;
    overflow:hidden
}
.drawing-item {
    position:relative;
    cursor:move
}
.drawing-item.unfocus-bordered:not(.active-from-item)>div:first-child {
    border:1px dashed #ccc
}
.drawing-item .el-form-item {
    padding:8px 10px
}
.drawing-row-item {
    position:relative;
    cursor:move;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    outline:1px dashed #ccc;
    border-radius:3px;
    margin-bottom:15px
}
.drawing-row-item .drawing-row-item {
    margin-bottom:2px
}
.drawing-row-item .el-form-item {
    margin-bottom:0
}
.drawing-row-item .drag-wrapper {
    min-height:80px;
    padding:20px 0;
    overflow:hidden
}
.drawing-row-item.active-from-item {
    border:1px dashed #409eff
}
.drawing-row-item .component-name {
    position:absolute;
    top:0;
    left:0;
    font-size:12px;
    color:#bbb;
    display:inline-block;
    padding:0 6px
}
.drawing-item:hover>.el-form-item,.drawing-row-item:hover>.el-form-item {
    background:#f6f7ff;
    border-radius:6px;
    outline:1px dashed #38adff
}
.drawing-item:hover>.drawing-item-copy,.drawing-item:hover>.drawing-item-delete,.drawing-row-item:hover>.drawing-item-copy,.drawing-row-item:hover>.drawing-item-delete {
    display:initial;
    background:#38adff
}
.drawing-item>.drawing-item-copy,.drawing-item>.drawing-item-delete,.drawing-row-item>.drawing-item-copy,.drawing-row-item>.drawing-item-delete {
    display:none;
    position:absolute;
    top:0;
    width:22px;
    height:22px;
    line-height:22px;
    text-align:center;
    font-size:18px;
    cursor:pointer;
    z-index:1
}
.drawing-item>.drawing-item-copy,.drawing-row-item>.drawing-item-copy {
    right:56px;
    border-color:#409eff;
    color:#409eff
}
.drawing-item>.drawing-item-copy:hover,.drawing-row-item>.drawing-item-copy:hover {
    background:#409eff;
    color:#fff
}
.drawing-item>.drawing-item-delete,.drawing-row-item>.drawing-item-delete {
    right:6px;
    border-color:#f56c6c;
    color:#fff
}
#ipad {
    height:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
#ipad .ipadbody,#ipad .ipadscreen,#ipad .outeripad {
    position:relative;
    height:100%
}
#ipad .ipadcamera,#ipad .ipadhomebutton {
    position:absolute
}
.outeripad {
    -webkit-box-shadow:0 0 13px 3px rgba(0,0,0,.2);
    box-shadow:0 0 13px 3px rgba(0,0,0,.2);
    border-radius:10px;
    margin:auto
}
.outeripad.portrait {
    padding:45px 25px;
    height:85%!important;
    width:74%;
    min-height:560px
}
.outeripad.landscape {
    width:90%;
    padding:25px 45px;
    height:78%!important
}
.outeripad.landscape .ipadcamera {
    left:-20px;
    top:50%;
    margin-top:-10px
}
.outeripad.landscape .ipadhomebutton {
    margin-right:-38px;
    top:50%;
    right:0;
    left:unset;
    margin-top:-18px
}
.outeripad .ipadbody {
    background-color:#fff;
    border-radius:10px
}
.outeripad .ipadscreen {
    background-color:hsla(0,0%,93.7%,.6)
}
.outeripad .ipadcamera {
    top:-38px;
    left:50%;
    background-color:#aeaeae;
    height:10px;
    width:10px;
    border-radius:5px;
    margin-top:10px;
    margin-left:-5px
}
.outeripad .ipadhomebutton {
    background-color:#fff;
    height:30px;
    width:30px;
    border-radius:15px;
    border:1px solid #a8a8a8;
    margin-top:6px;
    margin-left:-15px;
    left:50%;
    cursor:pointer
}
.outeripad .el-radio-group {
    line-height:2.5
}
.el-date-editor .el-range-separator {
    -webkit-box-sizing:content-box;
    box-sizing:content-box
}
.svg-icon {
    float:right
}
.icon-item {
    width:40px;
    height:40px;
    margin:6px;
    position:relative;
    cursor:pointer;
    opacity:.5
}
.icon-item.active,.icon-item:hover {
    opacity:1
}
.setting-container {
    width:600px;
    height:100%;
    margin:auto;
    background:#fff;
    padding:16px
}
.setting-container .el-form--label-top .el-form-item__label {
    padding-bottom:0
}
.setting-container {
    width:600px;
    height:100%;
    margin:auto;
    background:#fff;
    padding:16px
}
.setting-container .el-form--label-top .el-form-item__label {
    padding-bottom:0
}
.page {
    width:100vw;
    height:100vh;
    padding-top:54px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.page .page__header {
    width:100%;
    height:54px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    color:#fff;
    background:#3296fa;
    font-size:14px;
    position:fixed;
    top:0
}
.page .page__header .page-actions {
    height:100%;
    text-align:center;
    line-height:54px
}
.page .page__header .page-actions>div {
    height:100%;
    padding-left:20px;
    padding-right:20px;
    display:inline-block
}
.page .page__header .page-actions i {
    font-size:22px;
    vertical-align:middle
}
.page .page__header .step-tab {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    height:100%;
    position:relative
}
.page .page__header .step-tab>.step {
    width:140px;
    line-height:54px;
    padding-left:30px;
    padding-right:30px;
    cursor:pointer;
    position:relative
}
.page .page__header .step-tab>.step.ghost-step {
    position:absolute;
    height:54px;
    left:0;
    z-index:-1;
    background:#4483f2;
    -webkit-transition:-webkit-transform .5s;
    transition:-webkit-transform .5s;
    transition:transform .5s;
    transition:transform .5s,-webkit-transform .5s
}
.page .page__header .step-tab>.step.ghost-step:after {
    content:"";
    border-width:6px 6px 6px;
    border-style:solid;
    border-color:transparent transparent #fff;
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-6px
}
.page .page__header .step-tab>.step.active>.step-index {
    background:#fff;
    color:#4483f2
}
.page .page__header .step-tab>.step>.step-index {
    display:inline-block;
    width:18px;
    height:18px;
    border:1px solid #fff;
    border-radius:8px;
    line-height:18px;
    text-align:center;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.page .page__content {
    width:100%;
    height:100%;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.publish-btn {
    margin-right:20px;
    color:#3296fa;
    padding:7px 20px;
    border-radius:4px;
    font-size:14px
}
.github {
    position:fixed;
    bottom:10px;
    left:20px
}
body,html {
    /*margin:0;*/
    /*padding:0;*/
    /*!*background:#fff;*!*/
    /*-moz-osx-font-smoothing:grayscale;*/
    /*-webkit-font-smoothing:antialiased;*/
    /*text-rendering:optimizeLegibility*/
}
body,html,input,textarea {
    /*font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji*/
}
.editor-tabs {
    background:#121315
}
.editor-tabs .el-tabs__header {
    margin:0;
    border-bottom-color:#121315
}
.editor-tabs .el-tabs__header .el-tabs__nav {
    border-color:#121315
}
.editor-tabs .el-tabs__item {
    height:32px;
    line-height:32px;
    color:#888a8e;
    border-left:1px solid #121315!important;
    background:#363636;
    margin-right:5px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.editor-tabs .el-tabs__item.is-active {
    background:#1e1e1e;
    border-bottom-color:#1e1e1e!important;
    color:#fff
}
.editor-tabs .el-icon-edit {
    color:#f1fa8c
}
.editor-tabs .el-icon-document {
    color:#a95812
}
.right-scrollbar .el-scrollbar__view {
    padding:12px 18px 15px 15px
}
.el-scrollbar__wrap {
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    overflow-x:hidden!important
}
.center-tabs .el-tabs__header,.el-scrollbar__wrap {
    margin-bottom:0!important
}
.center-tabs .el-tabs__item {
    width:50%;
    text-align:center
}
.center-tabs .el-tabs__nav {
    width:100%
}
.reg-item {
    padding:12px 6px;
    background:#f8f8f8;
    position:relative;
    border-radius:4px
}
.reg-item .close-btn {
    position:absolute;
    right:-6px;
    top:-6px;
    display:block;
    width:16px;
    height:16px;
    line-height:16px;
    background:rgba(0,0,0,.2);
    border-radius:50%;
    color:#fff;
    text-align:center;
    z-index:1;
    cursor:pointer;
    font-size:12px
}
.reg-item .close-btn:hover {
    background:rgba(210,23,23,.5)
}
.reg-item+.reg-item {
    margin-top:18px
}
.action-bar .el-button+.el-button {
    margin-left:15px
}
.action-bar i {
    font-size:20px;
    vertical-align:middle;
    position:relative;
    top:-1px
}
.custom-tree-node {
    width:100%;
    font-size:14px
}
.custom-tree-node .node-operation {
    float:right
}

.custom-tree-node .el-icon-plus {
    color:#409eff
}
.custom-tree-node .el-icon-delete {
    color:#157a0c
}
.el-scrollbar__view {
    overflow-x:hidden
}
.el-rate {
    display:inline-block;
    vertical-align:text-top
}
.el-upload__tip {
    line-height:1.2
}
.svg-icon {
    width:18px;
    height:18px;
    vertical-align:bottom;
    fill:currentColor;
    overflow:hidden
}
.svg-external-icon {
    background-color:currentColor;
    -webkit-mask-size:cover!important;
    mask-size:cover!important;
    display:inline-block
}
.explain-text,.explain-text,.explain-text,.explain-text {
    font-size:12px;
    color:#aaa;
    line-height:20px
}
.h-transfer {
    text-align:left;
    position:fixed;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    z-index:2999;
    line-height:32px
}
.h-transfer>.mask {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,.5)
}
.h-transfer .el-tabs--border-card {
    -webkit-box-shadow:none;
    box-shadow:none
}
.h-transfer .el-tabs__content {
    overflow:visible;
    min-height:250px
}
.h-transfer .el-tabs__nav {
    width:100%;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex
}
.h-transfer .el-tabs__nav>.el-tabs__item {
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1
}
.h-transfer.single-tab .el-tabs__item {
    text-align:center;
    background:#f5f7fa!important;
    border-bottom:1px solid #e4e7ed;
    border-right-width:0
}
.h-transfer .searchResPane {
    position:absolute;
    overflow-y:auto;
    z-index:99;
    left:0;
    top:100%;
    width:100%;
    height:100%;
    background:#fff;
    border:1px solid #dcdfe6;
    -webkit-transition:top .5s;
    transition:top .5s
}
.h-transfer .searchResPane.active {
    top:0
}
.h-transfer .searchResPane .hidden-tag {
    color:#999;
    font-size:12px;
    text-align:right;
    padding-top:4px;
    padding-right:12px;
    cursor:pointer
}
.h-transfer .searchResPane .hidden-tag:hover {
    color:#66b1ff
}
.h-transfer .searchResPane .item {
    padding:4px 14px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    line-height:1.5
}
.h-transfer .searchResPane .item:hover {
    background-color:#ecf5ff;
    color:#66b1ff;
    cursor:pointer
}
.h-transfer .searchResPane .item .search-res-tip {
    font-size:12px;
    color:#999;
    max-width:280px
}
.h-transfer .enough-mask {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    color:#fff;
    font-size:16px;
    z-index:100;
    height:100%;
    background:rgba(0,0,0,.5);
    letter-spacing:4px
}
.h-transfer .p-center,.h-transfer .transfer__content {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%)
}
.h-transfer .transfer__content {
    width:800px;
    background:#fff;
    overflow:hidden;
    border-radius:4px
}
.h-transfer .transfer__header {
    margin-bottom:6px;
    background:#565656;
    padding:6px 24px;
    color:#fff
}
.h-transfer .transfer__header .el-icon-close {
    cursor:pointer;
    float:right;
    margin-top:10px
}
.h-transfer .transfer__body {
    padding:12px 0;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-around
}
.h-transfer .transfer-pane {
    width:360px
}
.h-transfer .search-input input {
    border:1px solid #dcdfe6!important
}
.h-transfer .search-input input:focus {
    border-color:#409eff!important
}
.h-transfer .transfer-pane__tools {
    margin-bottom:10px;
    height:30px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.h-transfer .transfer-pane__tools span:last-child {
    cursor:pointer
}
.h-transfer .transfer-pane__body {
    position:relative;
    width:100%;
    height:330px;
    overflow:hidden;
    font-size:14px
}
.h-transfer .transfer-pane__body>>>.el-scrollbar__view {
    height:100%
}
.h-transfer .transfer-pane__body .el-tabs__item {
    height:26px;
    line-height:26px
}
.h-transfer .transfer-icons {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
.h-transfer .transfer-icons i {
    margin-top:20px;
    margin-bottom:20px;
    cursor:pointer;
    font-size:20px;
    color:#696969
}
.h-transfer .transfer-icons i:hover {
    -webkit-transform:scale(1.1);
    transform:scale(1.1)
}
.h-transfer .tree-node {
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    font-size:14px;
    padding-right:8px
}
.h-transfer .tree-node .node-label {
    max-width:250px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:inline-block
}
.h-transfer .tree-node .node-checkbox {
    position:absolute;
    right:0
}
.h-transfer .tree-node i {
    font-size:10px
}
.h-transfer .tree-node i:hover {
    color:#409EFF;
    cursor:pointer
}
.h-transfer .right-pane {
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    overflow-x:hidden;
    height:290px;
    margin-bottom:10px
}
.h-transfer .right-pane .selected-item {
    padding:0 12px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.h-transfer .right-pane .selected-item:hover {
    background-color:#f5f7fa
}
.h-transfer .right-pane .selected-item span {
    max-width:90%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.h-transfer .right-pane .selected-item i:hover {
    color:#409EFF;
    cursor:pointer
}
.h-transfer .dot {
    width:2px;
    height:2px;
    display:inline-block;
    border-radius:50%;
    background:#4caf50
}
.h-transfer .text-ellipsis {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.tags .input-box.as-input {
    border:1px solid #dcdfe6;
    padding-left:6px;
    font-size:12px;
    min-height:32px;
    line-height:30px;
    border-radius:4px;
    background:#fff;
    color:#606266;
    cursor:pointer
}
.tags .org-tag {
    margin-right:6px;
    max-width:6rem;
    overflow:hidden;
    text-overflow:ellipsis;
    position:relative;
    padding-right:1rem;
    vertical-align:middle
}
.tags .org-tag .el-tag__close {
    position:absolute;
    right:2px;
    top:50%;
    margin-top:-7px
}
.fc-table-box {
    margin-bottom:0
}
.fc-table-box .row-action {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
.fc-table-box .row-action .el-icon-delete {
    position:absolute;
    opacity:0;
    z-index:-1;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    cursor:pointer
}
.fc-table-box .actions {
    text-align:center;
    border:1px solid #ebeef5;
    border-top:none
}
.fc-table-box .list-summary {
    line-height:24px;
    overflow:hidden;
    border:1px solid #e5e5e5;
    border-top:none
}
.fc-table-box.list .list-row {
    padding:18px 0 10px;
    text-align:left;
    border-bottom:1px solid #e5e5e5;
    position:relative
}
.fc-table-box.list .list-row:hover .delete-btn {
    display:block
}
.fc-table-box.list .list-row .delete-btn {
    position:absolute;
    right:10px;
    top:20px;
    z-index:999;
    cursor:pointer;
    display:none
}
.fc-table-box.list .list-row .delete-btn:hover {
    color:#000
}
.fc-table-box.list .list-row .row-item {
    margin-bottom:18px;
    position:relative
}
.fc-table-box.list .list-row .row-item.error .error-tip {
    top:74%;
    z-index:1
}
.fc-table-box.list .list-row .row-item.error .el-input__inner {
    border-color:#f56c6c
}
.fc-table-box.list .list-row .row-item>div:first-child {
    text-align:right;
    vertical-align:middle;
    float:left;
    font-size:14px;
    color:#606266;
    line-height:32px;
    padding:0 12px 0 0;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.fc-table-box.list .error-tip {
    font-size:12px;
    padding-left:6px;
    color:#f56c6c;
    position:absolute;
    left:100px;
    top:0;
    z-index:-1;
    -webkit-transition:bottom .3s;
    transition:bottom .3s;
    min-height:auto
}
.fc-table-box.table .el-table__row:hover .index {
    display:none
}
.fc-table-box.table .el-table__row:hover .el-icon-delete {
    z-index:9;
    opacity:1
}
.fc-table-box.table .el-input__inner,.fc-table-box.table .el-textarea__inner {
    width:100%;
    border:none;
    text-align:left;
    padding-right:10px;
    padding-left:10px
}
.fc-table-box.table .el-date-editor .el-input__prefix {
    left:-10px;
    top:1px
}
.fc-table-box.table .el-date-editor .el-input__suffix {
    top:1px;
    right:0
}
.fc-table-box.table .el-input-number {
    width:100%
}
.fc-table-box.table .el-upload--text {
    width:100%;
    height:100%;
    padding-top:6px;
    white-space:nowrap
}
.fc-table-box.table .input-box {
    border:none!important;
    min-height:40px!important;
    padding-left:0!important
}
.fc-table-box.table .el-table .el-table__body td {
    padding:0;
    background:#fff!important
}
.fc-table-box.table .el-table .el-table__body td .error-tip {
    font-size:12px;
    padding-left:6px;
    color:#f56c6c
}
.fc-table-box.table .el-table .el-table__body td .cell {
    position:relative
}
.fc-table-box.table .el-table .el-table__body td .cell>div {
    width:100%;
    min-height:40px
}
.fc-table-box.table .el-table .el-table__body td:not(:first-child) {
    vertical-align:top
}
.fc-table-box.table .el-table .el-table__body td:not(:first-child):after,.fc-table-box.table .el-table .el-table__body td:not(:first-child):before {
    content:"";
    width:10px;
    height:10px;
    background:#fff;
    position:absolute;
    border:2px solid transparent;
    -webkit-transition:border-color .3s;
    transition:border-color .3s
}
.fc-table-box.table .el-table .el-table__body td:not(:first-child):after {
    border-top:none;
    border-right:none;
    left:0;
    bottom:0
}
.fc-table-box.table .el-table .el-table__body td:not(:first-child):before {
    border-bottom:none;
    border-left:none;
    right:0;
    top:0
}
.fc-table-box.table .el-table .el-table__body td:not(:first-child):hover:after,.fc-table-box.table .el-table .el-table__body td:not(:first-child):hover:before {
    border-color:red
}
.fc-table-box.table .fc-org-select {
    position:relative
}
.fc-table-box.table .el-slider {
    padding-left:10px
}
.fc-table-box.table .el-upload-list--text {
    position:fixed;
    margin-left:-6px;
    background:#fff;
    -webkit-box-shadow:2px 2px 8px 2px rgba(0,0,0,.1);
    box-shadow:2px 2px 8px 2px rgba(0,0,0,.1);
    max-width:250px;
    -webkit-transition:margin-top .3s;
    transition:margin-top .3s;
    display:none;
    z-index:9
}
.fc-table-box.table .el-upload-list--text.show {
    display:block
}

*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.shanchutiao{
    background: #409EFF;
    display: inline-block;
    width: 24px;
    text-align: center;
    position: absolute;
    right: -14px;
    top: -8px;
}
.shanchutiao i{
    color: #FFFFFF;
    font-size: 18px!important;
}

.shanchu{
    background: #F27807;
    display: inline-block;
    width: 24px;
    text-align: center;
}
.shanchu i{
    color: #FFFFFF;
    font-size: 18px!important;
}
.fa-plus{color: #FFFFFF}
.flow-path-card-end {
    width:150px;
    min-height:82px;
    font-size:12px;
    border-radius:4px;
    cursor:pointer;
    overflow:hidden;
    position:relative;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-box-shadow:0 0 6px 0 rgba(0,0,0,.3);
    box-shadow:0 0 6px 0 rgba(0,0,0,.3);
    background-color: #F3F3F4!important;text-align: center;line-height: 80px;
}
pre{
    background-color: unset!important;
    border: unset!important;
}
